<template>
  <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
    <div class="popups">
      <div class="popup">
        <div class="popup-header">
          <span> {{title}}</span>
          <i class="el-icon-close" style="cursor: pointer;" @click="close()"></i>
        </div>
        <div class="popup-content">
          <slot>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
   data() {
      return {};
   },
   props: ["event", "title"],
   methods: {
      close() {
         this.$Bus.$emit(this.event, false);
      }
   }
};
</script>
<style lang="scss">
 .popups {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 100;
	.popup {
	   width: 580px;
	   min-height: 355px;
	   position: relative;
	   top: 30%;
	   z-index: 101;
	   margin: 0 auto;
	   background-color: rgba(255, 255, 255, 1);
	   .popup-header {
		  padding: 5px 15px;
		  border-bottom: 1px solid #f8f8f8;
		  height: 30px;
		  background-color: #eee;
		  font-size: 14px;
		  line-height: 30px;
		  i {
			 float: right;
			 line-height: 30px;
			 font-size: 16px;
			 color: #000;
			 font-weight: 500;
		  }
	   }
	   .popup-content {
		  padding: 20px 80px 10px;
		  // margin-bottom: 50px;
	   }
	   .popup-but {
		  width: 86%;
		  height: 70px;
		  margin: 15px 40px 0px;
		  border-top: 1px solid #c0c0c0;
		  position: absolute;
		  bottom: 0;
		  padding-right: 10px;
		  box-sizing: border-box;
	   }
	}
 }
</style>


